<template>
  <div class="container">
    <van-tabs v-model="activeIndex" :swipe-threshold="5" sticky offset-top="46" type="line" @click="handleTabClick">
      <van-tab v-for="(item, index) in tabTitles" :key="index" :title="item.tabTitle">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了"
          @load="onReachBottom">
          <div class="list">
            <div class="item" v-for="(item, index) in list" :class="{ 'notFirst': index > 0 }" :key="`item` + index">
              <div class="top">
                <div class="left">
                  {{ activeIndex == 0  ? (item.status == 0? '申请提现(待审核)':item.status == 1 ? '申请提现(已同意)':'申请提现(已拒绝)'): item.remarks }}
                </div>
                <div class="right" :class="{ 'add': getStatus(item.remarks) }">
                  {{ getStatus(item.remarks)?'+'+item.amount:'-'+item.amount }}
                </div>
              </div>
              <span class="times">{{ item.createTime }}</span>
            </div>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { getConsumptionRecordQuery } from '@/api/user'

export default {
  name: 'Record',
  components: {
  },
  computed: {
  },
  data() {
    return {
      finished:true,
      loading:false,
      list: [],
      activeIndex: 0,
      tabTitles: [
        {
          tabTitle: '余额提现记录',
          index: 2
        },
        {
          tabTitle: '余额消费记录',
          index: 1
        },
        {
          tabTitle: '积分记录',
          index: 3
        }
      ],
      nowBalbance: 0,
      withdrawalAmount: 0,
      rechargeCount: '',
      wthdrawalCount: '',
      show: '',
      setWthdrawals: false,
      showRecharge: false,
      showWthdrawal: false,
      ispay: false,
      userInfo: null,
      pageSize:1,
      pageNumber:1,
      remarks:['余额充值','交易中转可提现','积分充值','积分增长','余额推荐收益增长','余额现金奖励增长','申请提现(已拒绝)','积分抵扣普通商品（退货）','积分奖励任务完成充值','余额现金奖励任务完成充值','积分抵扣普通商品（混合支付退货）']
    }
  },
  async created() {
    // this.loading = true
    // this.finished = true
    // await this.getInfos()
    await this.getList()
  },
  methods: {
    getStatus(remarks){
      if(this.remarks.includes(remarks)){
        return true
      }
    },
    async handleTabClick(index) {
      console.log(index)
      this.activeIndex = index
      this.loading =false
      this.finished =true
      this.list = []
      this.pageNumber = 1
      console.log('handleTabClick')
      await this.getList()
    },
    async getList() {
      console.log(this.activeIndex)
      let type = this.tabTitles[this.activeIndex].index
      const res = await getConsumptionRecordQuery({ type,pageNum:this.pageNumber })
      // this.finished = false
      this.loading = false
      this.list = [...this.list,...res.map.list.records]
      this.pageSize = res.map.list.pages
      if(this.pageNumber >= this.pageSize){
        this.finished = true
      }else{
        this.finished = false
      }
    },
    async onReachBottom(){
      if(this.finished || this.pageSize ==0){
        this.loading =false
        this.finished = true
        return
      }
      console.log(this.finished)
      if(this.pageNumber<this.pageSize){
        this.loading =false
        this.finished = true
        this.pageNumber+=1
        await this.getList()
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.container::-webkit-scrollbar {
  display: none; /* 针对Webkit浏览器 */
}
.container {
  margin: 0;
  padding: 0;
  height: 88.8vh;
  overflow: scroll;
  
  background-color: #f0f0f0;


  .list {
    width: 96%;
    margin: 0 auto;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;


    .notFirst {
      margin-top: 5px;
    }

    .item {
      border-radius: 20px;
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
      padding: 30px 20px 10px 20px;
      border-bottom: 1px solid #9e9e9e60;
      display: flex;
      flex-direction: column;

      .top {
        line-height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .add {
          color: #ef3939 !important;
        }
        .right{
          color: green;
        }
      }

      .times {
        margin-top: 20px
      }
    }
  }

}

.selecteds {
  border: 1px solid green !important;
}
</style>